<template>
	<view class="index">
		<!-- 顶部导航 -->
		<uni-nav-bar v-if="navBarShowTag" :scrollTop="200">
			<view class="tabs-box">
				<view class="one-nav" :class="{'nav-actived': currentSwiperIndex === 0}" @tap="swiperChange(0)">推荐</view>
				<view class="one-nav" :class="currentSwiperIndex === 1 ? 'nav-actived': ''" @tap="swiperChange(1)">资讯</view>
			</view>
		</uni-nav-bar>
		<!-- 页面 header 相关部分 -->
		<view class="header-box">
			<!-- 顶部轮播图 -->
			<swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="2500" :duration="500">
				<swiper-item>
					<navigator open-type="navigate" :url="'/pages/webview/webview?url=' + encodeURI('http://baidu.com')" class="swiper-item"><image src="@/static/1.jpg" class="banner-swiper-img w-full h-full" mode="aspectFill"></image></navigator>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item"><image src="@/static/2.jpg" class="w-full h-full" mode="aspectFill"></image></view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item"><image src="@/static/1.jpg" class="w-full h-full" mode="aspectFill"></image></view>
				</swiper-item>
			</swiper>
			<!-- 遮罩使用弧形框 -->
			<image class="circle" src="@/static/circle.png" mode="aspectFill"></image>
			<!-- 两个选项按钮 -->
			<view class="card-header">
				<view class="card-one card-left" @click="gotoTab('/pages/feeds/index')">
					<!-- <image class="" src="@/static/circle.png" mode="aspectFill"></image> -->
					<view class="iright">
						<view class="title">精彩动态</view>
					</view>
				</view>
				<navigator url="/pages/center/index" open-type="switchTab" class="card-one card-right">
					<view class="iright">
						<view class="title">个人中心</view>
					</view>
				</navigator>
			</view>
			<!-- Tab 选项卡 -->
			<view class="tabs-box">
				<view class="one-nav" :class="{'nav-actived': currentSwiperIndex === 0}" @tap="swiperChange(0)">推荐</view>
				<view class="one-nav" :class="currentSwiperIndex === 1 ? 'nav-actived': ''" @tap="swiperChange(1)">资讯</view>
			</view>
		</view>
		<!-- 内容轮播导航实现 -->
		<swiper class="swiper-box" :current="currentSwiperIndex" :style="'height:' + swiperSliderHeight" @animationfinish="swiperSlider">
			<!-- 推荐动态实现 -->
			<swiper-item class="swiper-item sns-now">
				<sns-waterfall v-model="feedsList">
					<template v-slot:left="{leftList}">
						<navigator class="feed-one" open-type="navigate" :url="'/pages/auth/login?id=' + item.id" v-for="(item, index) in leftList" :key="index">
							<image class="feed-img" :src="item.cover_url" mode="widthFix" :lazy-load="true"></image>
							<view class="u-line-2 feed-title" v-if="!!item.description">
								{{item.description}}
							</view>
							<view class="feed-info">
								<view class="iview">
									<image class="avatar" src="@/static/avatar.png" mode="aspectFill"></image>
									<text class="name u-line-1">用户名</text>
								</view>
								<view class="iview">
									<view class="ilike">
										<image v-if="item.has_like" src="@/static/lover.png" class="micon"></image>
										<image v-else src="@/static/love.png" class="micon"></image>
										<text class="love-count" v-if="item.collects_count > 0">
											{{ item.collects_count }}
										</text>
									</view>
								</view>
							</view>
						</navigator>
					</template>
					<template v-slot:right="{rightList}">
						<navigator class="feed-one" open-type="navigate" :url="'/pages/auth/login?id=' + item.id" v-for="(item, index) in rightList" :key="index">
							<image class="feed-img" :src="item.cover_url" mode="widthFix" :lazy-load="true"></image>
							<view class="u-line-2 feed-title" v-if="!!item.description">
								{{item.description}}
							</view>
							<view class="feed-info">
								<view class="iview">
									<image class="avatar" src="@/static/avatar.png" mode="aspectFill"></image>
									<text class="name u-line-1">用户名</text>
								</view>
								<view class="iview">
									<view class="ilike">
										<image v-if="item.has_like" src="@/static/lover.png" class="micon"></image>
										<image v-else src="@/static/love.png" class="micon"></image>
										<text class="love-count" v-if="item.collects_count > 0">
											{{ item.collects_count }}
										</text>
									</view>
								</view>
							</view>
						</navigator>
					</template>
				</sns-waterfall>
				<!-- <view class="feeds-box waterfall">
					<view class="feed-one" v-for="(item, index) in feedsList" :key="index">
						<navigator open-type="navigate" url="/page/auth/login">
							<image class="feed-img" :src="item.cover_url" mode="widthFix" :lazy-load="true"></image>
							<view class="u-line-2 feed-title" v-if="!!item.description">
								{{item.description}}
							</view>
							<view class="feed-info">
								<view class="iview">
									<image class="avatar" src="@/static/avatar.png" mode="aspectFill"></image>
									<text class="name u-line-1">用户名</text>
								</view>
								<view class="iview">
									<view class="ilike">
										<image v-if="item.has_like" src="@/static/lover.png" class="micon"></image>
										<image v-else src="@/static/love.png" class="micon"></image>
										<text class="love-count" v-if="item.collects_count > 0">
											{{ item.collects_count }}
										</text>
									</view>
								</view>
							</view>
						</navigator>
					</view>
				</view> -->
			</swiper-item>
				<!-- 资讯动态实现 -->
			<swiper-item class="swiper-item sns-news">
				<navigator open-type="navigate" :url="'/pages/auth/login?id=' + item.id" v-for="(item, index) in newsList" :key="index" class="news-one">
					<view class="left">
						<view class="title u-line-2">{{item.description}}</view>
						<view class="uinfo">
							<view class="iview">
								<view class="utime">
									<view class="name">{{ item.price }}</view>
								</view>
							</view>
							<text class="uptime">{{item.sales}} 发布</text>
						</view>
					</view>
					<view class="right">
						<image class="pic" mode="aspectFill" :src="item.cover_url"></image>
					</view>
				</navigator>
			</swiper-item>
		</swiper>

		<view class="upload-img">
			<image class="w-full h-full" src="@/static/camera.png" mode="aspectFull"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 轮播图列表信息
				swiperList: [],
				// 当前 推荐 资讯 滑动位置
				currentSwiperIndex: 0,
				// 动态列表数据
				feedsList: [],
				// 资讯列表数据
				newsList: [],
				// 推荐动态轮播器高度
				swiperSliderFeedsHeight: 0,
				// 资讯轮播器高度
				swiperSliderNewsHeight: 0,
				swiperSliderHeight: 0,
				// navBar 显示状态控制
				navBarShowTag: false,

				// 记录推荐滚动所在的位置
				oldFeedsScrollTop: 0,
				// 记录资讯滚动所在的位置
				oldNewsScrollTop: 0,
				page: 1,
			}
		},
		onLoad() {
			this.getIndex()
		},
		onPageScroll(event) {
			if(this.currentSwiperIndex === 0) {
				this.oldFeedsScrollTop = event.scrollTop
			} else {
				this.oldNewsScrollTop = event.scrollTop
			}
			if(event.scrollTop > 220) {
				this.navBarShowTag = true
			} else {
				this.navBarShowTag = false
			}
		},
		methods: {
			remove(id) {
				this.$refs.uWaterfall.remove(id);
			},
			gotoTab(url) {
				uni.switchTab({url})
			},
			getIndex() {
				this.$u.api.getIndex().then(res => {
					console.log(res);
					this.feedsList = res.goods.data
					this.swiperList = res.slides
					this.newsList = res.goods.data

					uni.$on("swiperHeightChange", height => {
						console.log('瀑布流计算出来轮播器高度为：' + height)
						this.swiperSliderFeedsHeight = height
						this.swiperSliderHeight = height
					})

					// 这里还不能使用动态获取，因为此时元素还未渲染，不能获取到数据
					// let selector = uni.createSelectorQuery().select('.sns-news');  
					let that = this;
					// selector.fields({size: true},data=>{  
					// 	console.log(data.height)  
					// 	let height = data.height;
					let height = 110;
						that.swiperSliderNewsHeight = (that.newsList.length * height + 100) + 'px'
					// }) 

					// this.feedsList = res.map(item => {
					// 	return {
					// 	 ...item,
					// 	 cover: this.BaseFileURL + item.images[0].file,
					// 	 avatar: !!item.user.avatar ? item.user.avatar.url : '/static/nopic.png',
					// 	 name: item.user.names
					// 	}
					// })
				})
			},
			/**
			 * 内容轮播导航切换-点击
			 */
			swiperChange(index) {
				if(this.currentSwiperIndex === index) return;
				if(index === 0) {
					this.swiperSliderHeight =  this.swiperSliderFeedsHeight
					uni.pageScrollTo({
						duration: 0,
						scrollTop: this.oldFeedsScrollTop
					})
				} else {
					this.swiperSliderHeight =  this.swiperSliderNewsHeight
					uni.pageScrollTo({
						duration: 0,
						scrollTop: this.oldNewsScrollTop
					})
				}
				this.currentSwiperIndex = index
			},
			/**
			 * 内容轮播导航切换-滑动
			 */
			swiperSlider(event) {
				let index = event.detail.current
				this.swiperChange(index)
			}
		}
	}
</script>

<style lang="scss" scoped>
/*
.waterfall {
	width: 80%;
	margin: 0 auto;
	// 瀑布流容器内元素的间隔
	column-count: 10px;
	// 瀑布流容器内排列的列数
	column-count: 2;
}
.item {
	padding: 10px;
	margin-bottom: 10px;
	// avoid 避免在主体框中插入任何中断（页面，列或区域）
	break-inside: avoid;
}

*/
.upload-img {
	width: 80rpx;
	height: 80rpx;
	box-sizing: border-box;
	padding: 22rpx;
	background: #3b3179;
	position: fixed;
	right: 20rpx;
	bottom: 130rpx;
	border-radius: 50%;
	box-shadow: 0 6px 20px rgba($color: #362d76, $alpha: .3); 
}
.index {
	background: #f0eff2;
	/*
	height: 100%;
	display: flex;
	flex-direction: column;
	*/
}

.swiper-box {
	background: #f0eff2;
}

.tabs-box {
	padding-top: 30rpx;
	display: flex;
	flex-direction: row;
	justify-content: center;
	width: 100%;
	.one-nav {
		width: 120rpx;
		line-height: 80rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #b8b8b8;
		text-align: center;
	}
		
	.nav-actived {
		color: #486ab8
	}
}

.header-box {
	position: relative;

	.swiper, .swiper-item {
		display: block;
		width: 100%;
		height: 420rpx;
	}
	.circle {
		width: 100%;
		height: 93rpx;
		position: absolute;
		top: 330rpx;
		left: 0;
		right: 0;
	}

	.card-header {
		position: absolute;
		top: 330rpx;
		display: flex;
		justify-content: center;
		width: 100%;
		.card-left {
			margin-right: 30rpx;
		}
		.title {
			display: inline-block;
			width: 280rpx;
			height: 90rpx;
			line-height: 90rpx;
			border-radius: 45rpx;
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
			background: #fff;
		}
	}
}

// .swiper-box {
// 	flex: 1;
// 	.swiper-item {
// 		overflow-y: scroll;
// 	}
// }

.sns-news {
	.news-one {
		box-sizing: border-box;
		padding: 10rpx 32rpx;
		margin: 20rpx 0;
		display: flex;
		justify-content: space-between;
		height: 200rpx;
	}
	.left {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20rpx 0;
		.title {
			font-size: 30rpx;
		}
		.uinfo {
			display: flex;
			justify-content: space-between;
		}
	}
	.right {
		margin-left: 20rpx;
		flex: none;
		.pic {
			width: 150rpx;
			height: 200rpx;
		}
	}
	.uptime {
		color: #888;
	}
}

.feed-one {
	padding: 10rpx 20rpx;
	margin-bottom: 20rpx;
}

.feed-img {
	// width: 300rpx;
	width: 100%;
	height: auto;
}
.feed-title {
	padding: 10rpx 0;
}
.feed-info {
	display: flex;
	justify-content: space-between;
	.avatar {
		width: 52rpx;
		height: 52rpx;
	}
	.iview {
		display: flex;
		align-items: center;
	}
	.name {
		margin-left: 15rpx;
		line-height: 60rpx;
	}
	.ilike {
		display: flex;
		.micon {
			width: 48rpx;
			height: 48rpx;
		}
		.love-count {
			margin-left: 2rpx;
			line-height: 48rpx;
		}
	} 
}

</style>
